body{

    animation: kleur infinite alternate 5s;
    margin: 0;  /* Sayfa kenar boşluklarını kaldırır */
    padding: 0;
    font-family: Arial, sans-serif;  /* Sayfanın varsayılan yazı tipini belirler */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;  /* Sayfanın yüksekliğini tam ekran yapar */
    box-sizing: border-box;  /* Sayfa genelinde taşma sorunlarını azaltır */
  }
  
  .content{
  
     
      position:relative;
      background-color: #6f7799;
      top: 200px;
     height: 500px;
     
  
    
  }
  
  
  .button:active{
  
  
       box-shadow:   0 5px 0px 0 rgb(77, 77, 134);
      background-color:#324a87;
  
  }
    .button{
        
         position: relative;
         margin: 40px;
         padding: 40px;
         z-index: 1;
  
  
          
  
  
  
    
      
  
  
  
    }
  
  .button:hover{
  
    background-color: rgb(93, 142, 232);
    background-size: cover;
    position: relative;
  }
  
  
  
    .button:hover{
  
      background-color: #6b80b2;
    background-size:contain;
  
      position: relative;
      
  
      
      
  
    }
    
  
  
  
  .topbar{


   display: flex;
   justify-content: end;
  
    


  
  }
  
  /*  Bu  'topbar a ' anlami    html de ki a href linki oluyor o yuzden html de  bir topbar a yok */
  .topbar a{
  
    color: #9ce40d;
    padding: 14px 16px;
    text-decoration:none;
    font-size: 20px;
    
    z-index: 1;
    transition: color 0.9s; 
    
    background-color: #fff;
    
    
  
  
   
  }
 
  
  .topbar a:hover{
  
    background-color: #324a87;
    color:rgb(150, 196, 82);
    border-radius: 50px;
    width: auto;
   
  }
  
  .topbar a.ev{
    background-color: #4f6fbf;
  }
  

  .paragraf{
    
  
  position: relative;
  z-index: 1;
  line-height: 55px;
  text-transform: lowercase; 
  font-size: 150%;
    color: aquamarine;
    font-variant: small-caps;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  }
  
  
  #baslik
  {
  
  color: #4f6fbf;
    box-shadow: 0px 0 20px 1px;
  }
  
  
  
  #over{
    
    overflow: hidden;
    position: relative;
    
    position: relative;
    z-index: 1;
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: auto;
    margin-top: 500px;
   white-space:normal;
  
  
  
  }
  
    
    
  
  
  
  
  
    .social_links a {
      
      text-decoration: none;
      color: #000; 
      font-size: 30px; 
       
      transition: color 0.s; 
      position:absolute; 
      z-index: 1;
      display:flexbox;
      justify-content: space-between;
      padding: 0px 9px ;
      
     
  
      
  }
  
  .social_links a.instagram:hover {
      color: #8030e1; 
    
  }
  
  .social_links a.whatsapp:hover {
      color: #25D366; 
  }
  
  .social_links a.instagram{
  
    position: relative;
    line-break: 300px;
  }
  
  
  .proje{ 
  
  text-align: center;
  position: relative;
  font-family: monospace;
  color: #94ee1f;
  box-shadow: 0px 0 20px 1px rgb(45, 45, 215);
  font-size: 40px;
  
  width: 600px;
  
  }


  @keyframes kleur {

    0% {
        background-color: #ff6f61; /* Kırmızımsı renk */
    }
    50% {
        background-color: #6b5b95; /* Morumsu renk */
    }
    100% {
        background-color: #88b04b; /* Yeşilimsi renk */
    }
}